02 Rotas parametrizadas

import { Component } from "@angular/core";

@Component({
    templateUrl: './photo-detail.component.html',
})
export class PhotoDetailComponent implements OnInit { 

    constructor() {}
}

<div class="bg-white border">
    <div class="row">
        <div class="col-lg-8">
            <ap-photo></ap-photo>
        </div>

        <div class="col-lg-4 p-4">
            <small>
                <p class="text-left break-word">?????</p>
                <hr>
            </small>
            <div class="mt-4">

                <form>
                    <div class="input-group">
                        <textarea class="form-control"></textarea>
                        <div class="input-group-append">
                            <button type="submit" class="btn btn-primary pull-left">
                                Publish
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div><!-- col-md-4 -->
    </div><!-- row end -->
</div>

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { PhotoListComponent } from './photos/photo-list/photo-list.component';
import { PhotoFormComponent } from './photos/photo-form/photo-form.component';
import { NotFoundComponent } from './errors/not-found/not-found.component';
import { PhotoListResolver } from './photos/photo-list/photo-list.resolver';
import { AuthGuard } from './core/auth/auth.guard';
import { PhotoDetailComponent } from './photos/photo-detail/photo-detail.component';

const routes: Routes = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'home'
    },
    { 
        path: 'home',
        loadChildren: './home/home.module#HomeModule'
    },              
    { 
        path: 'user/:userName', 
        component: PhotoListComponent,
        resolve: {
            photos: PhotoListResolver
        }
    },
    { 
        path: 'p/add', 
        component: PhotoFormComponent,
        canActivate: [AuthGuard]
    },
    {
        path: 'p/:photoId', // nova rota
        component: PhotoDetailComponent
    },
    { 
        path: '**', 
        component: NotFoundComponent 
    }  
];

@NgModule({
    imports: [ 
        RouterModule.forRoot(routes, { useHash: true } ) 
    ],
    exports: [ RouterModule ]
})
export class AppRoutingModule { }

// app/photos/photo/photo.service.ts
import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { Photo } from "./photo";

const API = 'http://localhost:3000';

@Injectable({ providedIn: 'root' })
export class PhotoService {

    constructor(private http: HttpClient) {}
    // código anterior omitido 

    findById(id: string) {
        return this.http.get<Photo>(
            API + '/photos/' + id
        );
    }    
}

import { Component } from "@angular/core";
import { ActivatedRouteSnapshot, ActivatedRoute } from "@angular/router";
import { OnInit } from "@angular/core";
import { Photo } from "../photo/photo";
import { PhotoService } from "../photo/photo.service";
import { Observable } from "rxjs";

@Component({
    templateUrl: './photo-detail.component.html',
})
export class PhotoDetailComponent implements OnInit { 

    photo: Photo;

    constructor(
        private route: ActivatedRoute,
        private photoService: PhotoService
    ) {}

    ngOnInit(): void {
        const photoId = this.route.snapshot.params.photoId;
        this.photoService.findById(photoId).subscribe(photo => this.photo = photo);
    }
}    

<div class="bg-white border">
    <div class="row">
        <div class="col-lg-8">
            <ap-photo [url]="photo?.url" [description]="photo?.description"></ap-photo>
        </div>

        <div class="col-lg-4 p-4">
            <small>
                <p class="text-left break-word">{{ photo?.description }}</p>
                <hr>
            </small>
            <div class="mt-4">

                <form>
                    <div class="input-group">
                        <textarea class="form-control"></textarea>
                        <div class="input-group-append">
                            <button type="submit" class="btn btn-primary pull-left">
                                Publish
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div><!-- col-md-4 -->
    </div><!-- row end -->
</div>